<template>
    <div>
        <nav-header>
            <template v-slot:title>发货订单</template>
<!--            <template v-slot:nav-right>管理</template>-->
        </nav-header>
        <div v-for="item in orders" style="margin: 10px;border-radius: 5px;background-color: #fff;padding: 15px 0;">
            <div class="container-fluid">
                <div class="row" style="margin-bottom: 15px;position: relative">
                    <div class="col-xs-6">快递单号：{{item.kd_code}}</div>
                                        <div class="col-xs-6">
                                            <span v-if="item.status == 3"
                                            style="position: absolute;right: 0;background-color: rgb(238, 238, 238);border-radius: 12px 0 0 12px;line-height: 24px;padding-left: 16px;">状态:已发货</span>
                                            <span v-if="item.status == 0"
                                            style="position: absolute;right: 0;background-color: rgb(238, 238, 238);border-radius: 12px 0 0 12px;line-height: 24px;padding-left: 16px;">状态:待发货</span>
                                        </div>
                </div>
                <div class="row" style="margin-bottom: 15px;">
                    <div class="col-xs-6">
                        <img style="width: 100%;" :src="item.collection_image">
                    </div>
                    <div class="col-xs-6" style="text-align: right;">
                        <p style="color: gray">时间:{{item.created_at}}</p>
                        <p style="color: rgb(214, 111, 84);"><span class="label label-warning"
                                                                   style="margin-right: 5px;">字画墨宝</span>{{item.collection_name}}
                        </p>
<!--                        <p><span style="color: rgb(214, 111, 84);font-weight: bold;font-size: 16px;">￥{{item.order_price}}</span>-->
<!--                        </p>-->
                    </div>
                </div>

<!--                <div v-if="item.status == 3" class="row">-->
<!--                    <div class="col-xs-6" style="font-size: 16px;">快递单号：{{item.kd_code}}</div>-->
<!--&lt;!&ndash;                    <div class="col-xs-6" style="font-size: 16px;text-align: right">{{item.kd_code}}</div>&ndash;&gt;-->
<!--                </div>-->


                <!--                <div class="row">-->
                <!--                    <div class="col-xs-6">-->
                <!--                    </div>-->
                <!--                    <div class="col-xs-6" style="text-align: right">-->
                <!--                        &lt;!&ndash;todo&ndash;&gt;-->
                <!--                        <p style="font-weight: bold;font-size: 16px;">已完结</p>-->
                <!--                    </div>-->
                <!--                </div>-->

            </div>
        </div>
    </div>
</template>
<script>
    import NavHeader from "../Layout/NavHeader";

    export default {
        components: {NavHeader},
        data() {
            return {
                orders: [
                    // {
                    //     id: '',
                    //     order_price: '',
                    //     order_time: '',
                    //     order_no: '',
                    //     agent_name: '',
                    //     agent_contract: '',
                    //     collection_name: '',
                    //     collection_status_text: '',
                    //     order_status: '',
                    // }
                ]
            }
        },
        created() {
        },
        mounted() {
            this.getOrders();
        },
        methods: {
            getOrders() {
                let that = this;
                this.api.getOrders(5).then(res => {
                    if (res.data) {
                        that.orders = res.data;
                    }
                })
            },
        },
    }
</script>
<style scoped>


</style>
